<template>
    <div class="index-top-list">
        <el-row>
            <el-col :span="24">
                <div class="wrapper">
                    <div class="toplist_item" v-for="item, index  in toplist" :key="item">
                        <IndexTopListItem :id="item.id" :index="index" :updateTime="item.updateTime"
                            :updateFrequency="item.updateFrequency"></IndexTopListItem>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { topList } from '@/api/index/IndexTopList'
import { ref, onMounted } from 'vue'
import IndexTopListItem from '@/components/index/IndexTopListItem.vue'
const toplist = ref([])
onMounted(async () => {
    const res = await topList()
    toplist.value = [...res.list].splice(0, 4)
})
</script>

<style lang="less" scoped>
.wrapper {
    flex: 1;
    display: flex;
    justify-content: space-between;

    .toplist_item {
        width: 100%;
        margin: 5px;

        &:nth-child(1) {
            margin-left: 0;
        }

        &:nth-child(4) {
            margin-right: 0;
        }
    }
}
</style>